<template>
  <div class="hello">
    <label for="reful api">reful api</label>：
    <input
      name="refulapi"
      type="button"
      value="reful api"
      v-on:click="onRefulApi"
    />

    <label for="reful api">grpc api</label>：
    <input
      name="refulapi"
      type="button"
      value="grpc api"
      v-on:click="onGrpcApi"
    />

    <label for="reful api">grpc http api</label>：
    <input
      name="refulapi"
      type="button"
      value="grpc http api"
      v-on:click="onGrpcHttpApi"
    />

    <label for="reful api">grpc http api post</label>：
    <input
      name="refulapi"
      type="button"
      value="grpc http api post"
      v-on:click="onGrpcHttpApiPost"
    />
  </div>
</template>

<script>
import { Empty } from "../grpc-proto-js/Protos/google/protobuf/empty_pb";
import { FileServiceClient } from "../grpc-proto-js/Protos/File/file_grpc_web_pb";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    // eslint-disable-next-line
    onRefulApi(event) {
      var xhr = new XMLHttpRequest();

      //arraybuffer、blob、document、json、text
      xhr.responseType = "json";

      xhr.addEventListener("readystatechange", function () {
        // eslint-disable-next-line
        if (this.readyState === 4) {
          console.log(this.response.data);
        }
      });

      //设置请求
      xhr.open("get", "http://localhost:5211/api/file/getbuffer");

      xhr.send();
    },
    // eslint-disable-next-line
    onGrpcApi(event) {
      const client = new FileServiceClient("http://localhost:5211", null, null);
      // eslint-disable-next-line
      client.readFileAsync(new Empty(), {}, (err, response) => {
        console.log(response);
      });
    },
    // eslint-disable-next-line
    onGrpcHttpApi(event) {
      var xhr = new XMLHttpRequest();

      //arraybuffer、blob、document、json、text
      xhr.responseType = "json";

      xhr.addEventListener("readystatechange", function () {
        // eslint-disable-next-line
        if (this.readyState === 4) {
          console.log(this.response.data);
        }
      });

      //设置请求
      xhr.open("get", "http://localhost:5211/v1/electron/getbase64");
      xhr.setRequestHeader("Content-Type", "application/json");

      xhr.send();
    },
    // eslint-disable-next-line
    onGrpcHttpApiPost(event) {
      var xhr = new XMLHttpRequest();

      //arraybuffer、blob、document、json、text
      xhr.responseType = "json";

      xhr.addEventListener("readystatechange", function () {
        // eslint-disable-next-line
        if (this.readyState === 4) {
          console.log(this.response.data);
        }
      });

      //设置请求
      xhr.open("post", "http://localhost:5211/v1/electron/create");
      xhr.setRequestHeader("Content-Type", "application/json");

      xhr.send(JSON.stringify({}));
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
